<template>
  <div style="width: 600px; margin: 0 auto">
    <h3 style="text-align: center">登录</h3>

    <el-form v-loading="loading" ref="form" :model="form" label-width="80px">
      <el-form-item label="账号">
        <el-input v-model="form.username" ref="username"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input
          type="password"
          v-model="form.password"
          ref="password"
        ></el-input>
      </el-form-item>
      <el-form-item label="验证码" style="position: relative">
        <el-input v-model="form.code" ref="code" style="width: 150px"></el-input
        >&nbsp;
        <img
          v-if="captcha_src"
          :src="captcha_src"
          alt
          style="position: absolute; top: 0; height: 50px; cursor: pointer"
          @click="reload_captcha"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import md5 from "js-md5";
import Cookies from "js-cookie";
export default {
  data() {
    return {
      loading: false,
      captcha_src: "",
      captcha_md5: "",
      form: {
        username: "admin",
        password: "123456",
        code: "",
        captcha_key: "",
      },
    };
  },
  async mounted() {
    if (typeof Cookies.get("auth") != "undefined") {
      this.$router.replace({
        path: "/home/index",
      });
      return;
    }
    //加载验证码
    this.reload_captcha();
  },
  methods: {
    reload_captcha() {
      this.$axios
        .post("/api/image_captcha/index", {
          r: Math.random(),
        })
        .then((data) => {
          this.captcha_src = data.data.base64.replace("\r\n", "");
          this.form.captcha_key = data.data.key;
          this.form.code = "";
          this.captcha_md5 = data.data.md5;
        })
        .catch((error) => {
          this.$message.error(error.toString());
        });
    },
    onSubmit() {
      //console.log(this.form);
      if (!this.form.username) {
        this.$message.error("账号不能为空");
        this.$refs.username.focus();
        return;
      }
      if (!this.form.password) {
        this.$message.error("密码不能为空");
        this.$refs.password.focus();
        return;
      }
      if (!this.form.code) {
        this.$message.error("验证码不能为空");
        this.$refs.code.focus();
        return;
      }
      if (md5(this.form.code) != this.captcha_md5) {
        this.$message.error("验证码不正确");
        this.form.code = "";
        this.$refs.code.focus();
        return;
      }

      this.loading = true;
      this.$axios
        .post("/api/welcome/login", this.form)
        .then((data) => {
          //console.log(response);
          this.loading = false;
          if (data.code > 0) {
            //cookie
            Cookies.set("userid", data.data.userid);
            Cookies.set("username", data.data.username);
            Cookies.set("groupid", data.data.groupid);
            Cookies.set("auth", data.data.auth);
            Cookies.set("power", JSON.stringify(data.data.power));

            this.$alert(data.msg, "系统提醒", {
              confirmButtonText: "确定",
              callback: (action) => {
                //跳转到会员中心首页
                this.$router.replace({
                  path: "/home/index",
                });
              },
            });
          } else {
            this.$alert(data.msg, "系统提醒", {
              confirmButtonText: "确定",
              callback: (action) => {
                try {
                  if (data.element) {
                    this.$refs[data.element].value = "";
                    this.$refs[data.element].focus();
                  }
                } catch (e) {}
              },
            });
          }
        })
        .catch((error) => {
          this.loading = false;
          this.$message.error(error.toString());
        });
    },
  },
};
</script>

<style scoped>
</style>
